<template>
  <div class="detail-modal" v-if="fullShow" @click="close">
    <div class="inner-con" @click.stop>
      <div class="info-header">
        <div>详情</div>
        <div class="close" @click="close"><i class="iconfont icon-delete"></i></div>
      </div>
      <div class="info-body">
        <div>
          <div class="user-info">
            <div class="left">
              <img :src="detailObj.user_head_img" alt="">
              <div>
                <div class="mb5">{{detailObj.user_name}}</div>
                <div class="fs12 cblue"><i class="iconfont icon-icon-test"></i>{{detailObj.address}}</div>
              </div>
            </div>
            <div class="right">
              <div class="fs12 c666 mb5">{{detailObj.init_time | formatDate('yyyy-MM-dd')}}</div>
              <div class="label">{{detailObj.category_name}}</div>
            </div>
          </div>
          <div class="detail-content">
            <div class="con">{{detailObj.info_content}}</div>
            <div>
              <img v-for="img in detailObj.info_imgs" :key="img" :src="imgUrl+img" alt="">
            </div>
            <div class="myitem">
              <div><i class="iconfont icon-tongxunlu fs18 cblue"></i>联系人：{{detailObj.lx_name}}</div>
              <div><i class="iconfont icon-dianhua-1 fs18 cblue"></i>联系电话：{{detailObj.mobilenum}}</div>
            </div>
            <div class="myitem">
              <div><i class="iconfont icon-liulan"></i><span class="num">{{detailObj.view_count}}</span>人浏览</div>
              <div><i class="iconfont icon-xiaoxi"></i><span class="num">{{detailObj.comment_count}}</span>人评论</div>
              <div><i class="iconfont icon-chakandianzan"></i><span class="num">{{detailObj.like_count}}</span>人点赞</div>
            </div>
          </div>
        </div>

        <!-- 评论 -->
        <div class="comment-con">
          <div class="comment-header">
            全部评论
          </div>
          <div class="myline"></div>

          <div class="comment-item" v-for="(item, index) in commentData" :key="item.comment_id">
            <div class="bigchild">
              <img :src="item.imgUrl+item.user_head_img" alt="">
              <div class="coninfo">
                <div>
                  <div>{{item.user_name}}</div>
                  <div class="fs12">{{item.init_time | formatDate('yyyy/MM/dd hh:mm:ss')}}</div>
                </div>
                <div class="con2">{{item.comment_info}}</div>
                <img class="commentimg" v-for="img in item.comment_imgs" :key="img" :src="imgUrl+img" alt="">
              </div>
            </div>
            <div class="child">
              <div class="childitem fs12" v-for="child in item.hf_comments" :key="child.comment_id">
                <img :src="item.imgUrl+child.user_head_img" alt="">
                <div class="flex1 coninfo">
                  <div>
                    <span class="num">{{child.user_name}}</span>
                    回复
                    <span class="num">{{child.at_user_name}}</span>
                    ：{{child.comment_info}}
                  </div>
                  <img class="commentimg" v-for="img in child.comment_imgs" :key="img" :src="imgUrl+img" alt="">
                  <div class="tr fs12">{{child.init_time | formatDate('yyyy/MM/dd hh:mm:ss')}}</div>
                </div>
              </div>
              <div class="myright">
                <el-button @click="getMoreChild(index)" v-if="item.hf_count > item.hf_comments.length" type="text">查看更多回复</el-button>
              </div>
            </div>
          </div>

          <div class="mycenter">
            <el-button v-if="hasMorePage" type="text" @click="getMore">查看更多</el-button>
            <el-button v-if="!hasMorePage" type="text" disabled>没有数据了~</el-button>
          </div>
        </div>

      </div>
      
    </div>
  </div>
</template>

<script>
import config from 'api/config'
export default {
  props: {
    fullShow: {
      default: false
    },
    detailObj: {
      default: () => {}
    },
    commentData: {
      default: () => []
    },
    hasMorePage: {
      default: false
    }
  },
  data(){
    return {
      imgUrl: config.imgUrl
    }
  },
  methods: {
    close () {
      this.$emit('update:fullShow', false)
    },
    getMore() {
      this.$emit('getMore')
    },
    getMoreChild(index) {
      this.$emit('getMoreChild', index)
    }
  },
  mounted () {
    document.body.appendChild(this.$el)
  },
  destroyed () {
    if (this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el)
    }
  }
}
</script>

<style lang="scss" scoped>
.coninfo{
  padding: 5px 0;
}
.myright{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.mycenter{
  display: flex;
  align-items: center;
  justify-content: center;
}
.commentimg{
  max-width: 100%;
}
.flex1{
  flex: 1;
}
.tr{
  text-align: right;
}
.con2{
  padding: 10px 0;
  color: #999; 
}
.myline{
  margin: 10px 0;
  height: 1px;
  border-bottom: 1px solid #eee;
}

.comment-item{
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  &:last-of-type{
    border-bottom: none;
  }
}

.comment-con{
  .comment-header{
    padding-left: 10px;
    border-left: 10px solid #409eff;
  }
  .bigchild{
    display: flex;
    &>img{
      height: 50px;
      width: 50px;
      margin-right: 10px;
    }
    .coninfo{
      flex: 1;
      &>div:nth-child(1){
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .child{
    padding-left: 60px;
    .childitem{
      display: flex;
      border-bottom: 1px solid #eee;
      &>img{
        height: 50px;
        width: 50px;
        margin-right: 10px;
      }
      &:last-child{
        border-bottom: none;
      }
    }
  }
}
.myitem{
  display: flex;
  height: 40px;
  justify-content: space-between;
}
.num{
  color: #409eff;
}
.detail-modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  .inner-con{
    width: 400px;
    background: #fff;
    border-radius: 5px;
    .info-header{
      height: 50px;
      padding-left: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f5f5f5;
      border-radius: 5px 5px 0 0;
    }
    .info-body{
      height: 500px;
      overflow: auto;
      padding: 10px 10px 0 10px;
    }
    .close{
      height: 50px;
      width: 50px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      border-radius: 0 5px 0 0;
      &:hover{
        background: red;
        color: #fff;
      }
    }
  }
  .user-info{
    display: flex;
    justify-content: space-between;
    .left{
      display: flex;
      img{
        height: 50px;
        width: 50px;
        margin-right: 10px;
      }
    }
    .right{
      text-align: right;
    }
  }
  .detail-content{
    .con{
      padding: 15px 0;
      color: #999; 
    }
  }
  .label{
    display: inline-block;
    padding: 2px;
    background: rgb(241, 241, 82);
    color: #fff;
  }
  .fs12{
    font-size: 12px;
  }
  .fs18{
    font-size: 25px;
    margin-right: 10px;
  }
  .cblue{
    color: #409eff;
  }
  .c666{
    color: #666;
  }
  .mb5{
    margin-bottom: 3px;
  }
}
</style>
